<template>
  <div class="post-card" v-if="loading">
    <div
      v-for="(item, index) in question_comments"
      :key="index"
      style="border-top: 1px solid #ebeef5; padding: 10px 0"
    >
      <div style="display: flex; position: relative">
        <el-avatar :src="item.avatar" class="avatar"></el-avatar>
        <div class="post-info">
          <div class="username-level">
            <span class="username">{{ item.nickName }}</span>
            <span v-if="item.parentNickName"
              >回复：{{ item.parentNickName }}</span
            >
          </div>
          <div class="post-time">{{ item.createTime }}</div>
        </div>
        <div
          class="delete-card"
          v-if="item.studentId == useStudentStore().studentInfo.studentId"
        >
          <span></span>
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="iconfont icon-a-13Ashenglve"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="deleteComment(item.id)"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="post-content">
        <p>{{ item.commentContent }}</p>
      </div>
      <div
        style="
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
        "
      >
        <span
          style="font-size: 14px; cursor: pointer"
          @click="click_Reply(item)"
          >回复</span
        >
        <span
          style="cursor: pointer; margin: 0 10px"
          v-if="item.isLike == 0"
          @click="click_thumbs(item, index)"
        >
          <i class="iconfont icon-dianzan1"></i>{{ item.likes }}
        </span>
        <span
          style="cursor: pointer; margin: 0 10px; color: blue"
          v-else
          @click="click_thumbs(item, index)"
        >
          <i class="iconfont icon-dianzan"></i>{{ item.likes }}
        </span>
      </div>

      <div class="reply" v-if="item.id == isReplyId">
        <div class="chat-input-container">
          <el-input
            v-model="replyContent"
            style="width: 580px"
            autosize
            resize="none"
            :rows="5"
            type="textarea"
            show-word-limit
            placeholder="请开始你的表演"
            ref="refInput"
            @keydown.enter="submitComment"
          />
          <div
            style="
              display: flex;
              justify-content: flex-end;
              margin-top: 10px;
            "
          >
            <el-button type="primary" @click="submitComment"
              >评论</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="display:flex;justify-content: end;">
    <el-input
      v-model="replyContent"
      style="width: 500px"
      placeholder="请开始你的表演"
    />
    <el-button type="primary" @click="publishComment">发布评论</el-button>
  </div>
</template>

<script setup>
import { nextTick,reactive, ref } from "vue";
import axios from "@/axios/index.js";
import { ElMessage,ElMessageBox  } from "element-plus";
import { useStudentStore } from "@/stores/student";
import { throttle } from "lodash";

let props = defineProps(["currentQuestionId"]);

//当前问题
let currentQuestion = ref();
//回复内容
let replyContent = ref();
let loading = ref(true);
//问题的所有评论
let question_comments = ref([]);
//是否回复id
let isReplyId = ref("");


//输入框聚焦
let refInput =ref()

//要回复的评论对象
let replyComment = reactive({});

/** 发布评论时*/
function publishComment() {
  if(replyContent.value == null || replyContent.value == '' || replyContent.value == undefined){
    ElMessage({
        message: "请输入评论内容",
        type: "error",
      });
      return
  }
  axios
    .post(
      "/api/v1/front/questionsComment",
      {
        studentId: useStudentStore().studentInfo.studentId,
        questionId: props.currentQuestionId,
        commentContent: replyContent.value,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((resp) => {
      ElMessage({
        message: "评论成功",
        type: "success",
      });
      replyContent.value = "";
      showDialog(replyComment);
    });
}

//防抖  1s只能点击一次
const click_submitComment = throttle(submitComment,1000)

/**发布回复评论*/
function submitComment() {
  console.log("调用");
  
  axios
    .post(
      "/api/v1/front/questionsComment",
      {
        studentId: useStudentStore().studentInfo.studentId,
        questionId: replyComment.questionId,
        commentContent: replyContent.value,
        pid: replyComment.id,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((resp) => {
      ElMessage({
        message: "评论成功",
        type: "success",
      });
      isReplyId.value = "-1";
      console.log(resp);
      replyContent.value = "";
      showDialog(replyComment);
    });
}

/** 点击回复时*/
function click_Reply(item) {
  isReplyId.value = item.id;
  replyComment = item;
  replyContent.value = "";

  nextTick(() => {
    console.log(refInput.value);
    
     refInput.value[0].focus(); 
  })
}

//防抖  限制500毫秒内只能点击一次
const click_thumbs = throttle(thumbs,500)

/** 点赞逻辑 */
function thumbs(item, index) {
  axios
    .get("/api/v1/front/commentLike", {
      params: {
        studentId: useStudentStore().studentInfo.studentId,
        commentId: item.id,
        isLike: item.isLike,
      },
    })
    .then((resp) => {
      question_comments.value[index].likes = resp.data.data.likes;

      if (item.isLike == 1) {
        question_comments.value[index].isLike = 0;
      } else {
        question_comments.value[index].isLike = 1;
      }
    });
}

/** 删除评论*/
function deleteComment(id) {
  ElMessageBox.confirm("确定删除评论回复吗？操作后不可恢复", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "返回",
    type: "warning",
  })
    .then(() => {
      axios
        .delete("/api/v1/front/questionsComment", { params: { commentId: id } })
        .then((resp) => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          
          showDialog()
        });
    })
    .catch(() => {
      //取消删除逻辑
    });
}

/** 点击评论时*/
function showDialog(item) {
  loading.value = false;
  currentQuestion.value = item;
  axios
    .get(
      `api/v1/front/questionsComment/showAllComments`,{params:{
        questionId:props.currentQuestionId,
        studentId:useStudentStore().studentInfo.studentId
      }}
    )
    .then((resp) => {
      loading.value = true;
      question_comments.value = resp.data.data;
    });
}

showDialog();
</script>

<style lang="less" scoped>
@import "https://at.alicdn.com/t/c/font_4465050_j6ra9xdv3vf.css";
.post-card {
  position: relative;
  height: 310px;
  padding: 16px;
  background-color: #ffffff;
  overflow-y: auto;

  .delete {
    position: absolute;
    top: 35px;
    right: 10px;
    li {
      list-style: none;
      padding: 10px;
      border: 1px solid #ebebeb;
    }
  }
}

.icon-a-13Ashenglve:hover .delete {
  display: block;
  background-color: red;
}

.avatar {
  display: flex;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  margin-bottom: 16px;
}

.post-info {
  
  display: flex;
  flex-direction: column;
}

.username-level {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-right: 8px;
}
.delete-card {
  margin-left: auto;
  cursor: pointer;
  margin-right: 10px;
}
.level-tag {
  margin: 0;
}

.post-time {
  font-size: 10px;
  color: #909399;
}

.post-content {
  margin-top: 10px;

  p {
    margin: 5px 0;
    font-size: 20px;
    padding-left: 80px;
  }
}

.reply {
  padding: 20px;
  background-color: #f7f8fc;
}

.iconfont {
  font-size: 18px;
}
</style>